<template>
    <div class="home_container h-full">
    <a-layout class="h-full">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible width="260">
        <div :class='["h-28","flex","items-center",collapsed?"justify-center":"pl-6"]'>
            <img src="https://q2.itc.cn/q_70/images03/20240807/9efb7d3e616440c6ab1d7e1d9b9be14f.jpeg" style="width:60px;height:60px;border-radius: 50%;" />
            <section class="px-4 text-white" v-if="!collapsed">
                <p class="text-xl">admin</p>
                <p>{{userStatus}},洋洋得意</p>
            </section>
        </div>
        <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
            <!-- 没有多级路由 -->
            <a-menu-item v-for="item in noChildren" :key="item.id">
                <component :is="item.icon" style="font-size: 20px;"></component>
                <span class="text-xl">{{item.name}}</span>
            </a-menu-item>
            <!-- 多级路由 -->
            <a-sub-menu 
            v-for="item in hasChildren"
             :key="item.id"
             class="subClass"
             >
                <template #icon>
                    <component :is="item.icon" style="font-size: 20px;"></component>
                </template>
                <template #title>
                    <span class="text-xl">{{item.name}}</span>
                </template>
                <a-menu-item v-for="child in item.children" :key="child.id">
                    <component :is="child.icon" style="font-size: 20px;"></component>
                    <span class="text-xl">{{child.name}}</span>
                </a-menu-item>
            </a-sub-menu>
        </a-menu>
        </a-layout-sider>
        <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
            <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
            />
            <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
        </a-layout-header>
        <a-layout-content
            :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
            Content
        </a-layout-content>
        </a-layout>
    </a-layout>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue';
    import { MenuUnfoldOutlined,MenuFoldOutlined } from '@ant-design/icons-vue';
    /**
     * 菜单栏功能
     */
    const onCollapse = (collapsed: boolean, type: string) => {
    console.log(collapsed, type);
    };

    const onBreakpoint = (broken: boolean) => {
    console.log(broken);
    };

    const selectedKeys = ref<string[]>(['4']);
    let collapsed = ref(false);

    // 列表渲染
    import menuList from '~/until/menuList'
    const hasChildren = menuList.filter(item => item.hasOwnProperty('children'))
    const noChildren = menuList.filter(item => !item.hasOwnProperty('children'))

    // 获取时间来判断显示状态
    import { getTimeStatus } from '~/until/tool'
    console.log(getTimeStatus())
    let userStatus = ref("")
    userStatus.value = getTimeStatus()
    /**
     * 
     */
    
</script>


<style scoped>
    :deep(.ant-menu-title-content) {
        align-items: center;
        display: flex;
    }
    :deep(.ant-menu-item) {
        height: 50px;
    }
    .trigger {
        font-size: 25px;
        cursor: pointer;
        padding-left: 15px;
    }
    :deep(.ant-menu-submenu-title) {
        height: 50px!important;
    }

</style>